/*
links
Header - admin buttons
Upload - submit loading button

ButtonGroup

<a class="Link">

<button class="Button">
<a class="Button">
<input class="Button" type="submit | button">
  variant="primary"
  size="tiny"

Loading Button
  <button class="Button">  is-loading
     <span>Next</span>
     <span class="Loader"></span>
  </button>
*/

.ButtonGroup {
  display: inline-flex;
  gap: var(--global-space-default);
}
.ButtonGroup--wide {
  gap: var(--global-space-lg);
}

/* Link */
:is(.Link, a) {
  color: var(--Link-color);
  text-decoration: var(--Link-textDecoration);
  transition: all 0.3s ease;
}
:is(.Link, a):hover {
  color: var(--Link-onHover-color);
  text-decoration: var(--Link-onHover-textDecoration);
}

/* Button */
.Button {
  background: var(--Button-default-background);
  color: var(--Button-default-color);
  border: var(--Button-default-border);
  box-shadow: var(--Button-default-boxShadow);
  display: inline-flex;
  gap: var(--global-space-sm);
  text-align: center;
  padding: 3px 6px;
  transition: all 0.3s ease;
  border-radius: var(--global-borderRadius);
  cursor: pointer;
  align-items: center;
  /* override a */
  text-decoration: none;
  white-space: no-wrap;
}
.Button:hover {
  background: var(--Button-default-onHover-background);
  color: var(--Button-default-onHover-color);
  border: var(--Button-default-onHover-border);
  box-shadow: var(--Button-default-onHover-boxShadow);
  text-decoration: none;
}
.Button:active {
  transform: scale(0.95);
}
.Button:disabled {
  cursor: not-allowed;
}

/* Tiny */
.Button[size='tiny'] {
  font-size: 10px;
  padding: 0 3px;
}

/* Primary */
.Button[variant='primary'] {
  background: var(--Button-primary-background);
  color: var(--Button-primary-color);
  border: var(--Button-primary-border);
  box-shadow: var(--Button-primary-boxShadow);
}

.Button[variant='primary']:hover {
  background: var(--Button-primary-onHover-background);
  color: var(--Button-primary-onHover-color);
  border: var(--Button-primary-onHover-border);
  box-shadow: var(--Button-primary-onHover-boxShadow);
}

.Button .Loader {
  display: none;
}
.Button.is-loading .Loader {
  display: grid;
}
